import { defineComponent } from 'vue';
import type { TreeProps } from 'ant-design-vue';
import {
  DownOutlined,
  CarryOutOutlined,
  FolderOpenOutlined,
  FolderOutlined,
  FileOutlined,
} from '@ant-design/icons-vue';
import { Tree } from 'ant-design-vue';
const { selectedKeys, expandedKeys, checkedKeys, ...props } = Tree.props;
export default defineComponent({
  props: {
    ...props,
    /** 数据加载接口 */
    fetch: {
      type: Function,
      required: true,
    },
    isShowHeader: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      /** 是否处于加载状态 */
      loading: false,
      /** （受控）展开指定的树节点 */
      expandedKeys: [],
      /** （受控）设置选中的树节点 */
      selectedKeys: [],
      /** （受控）选中复选框的树节点 */
      checkedKeys: [],
      /** g-tree 数据 */
      treeDataList: [] as TreeProps['treeData'],
      /** g-tree 配置对象 */
      treeProps: {},
    };
  },
  emits: [
    'fetch-success',
    'fetch-error',
    'add-click',
    'check',
    'dragend',
    'dragenter',
    'dragleave',
    'dragover',
    'dragstart',
    'drop',
    'expand',
    'load',
    'rightClick',
    'select',
  ],
  components: {
    DownOutlined,
    CarryOutOutlined,
    FolderOpenOutlined,
    FolderOutlined,
    FileOutlined,
  },
  created() {
    this.initTreeProps();
  },
  mounted() {
    this.initTreeDataList();
  },
  watch: {},
  computed: {
    /** 是否有数据 */
    hasEmpty() {
      return !!this.getTreeDataList() && this.getTreeDataList().length > 0;
    },
  },
  methods: {
    /********************************************************** 组件外部实现使用方法 start ************************************************************************ */

    /** 获取 g-tree loading 状态 */
    getLoading() {
      return this.loading;
    },
    /** 设置 g-tree loading 状态 */
    setLoading(loading: boolean) {
      this.loading = loading;
    },
    /** 获取 g-tree 某个配置 */
    getProp(key: string) {
      return this.treeProps.hasOwnProperty(key) ? this.treeProps[key] : null;
    },
    /** 获取 g-tree 配置对象 */
    getProps() {
      return { ...this.$slots, ...this.treeProps };
    },
    /** 设置 g-tree 配置对象 某一项 */
    setProp(key: string, value: any) {
      this.treeProps[key] = value;
    },
    /** 设置 g-tree 整个配置对象 */
    setProps(treeProps: any) {
      this.treeProps = treeProps;
    },
    /** 获取 g-tree 数据 */
    getTreeDataList() {
      if (!this.treeDataList) return [];
      return this.treeDataList;
    },
    /** 设置 g-tree 数据 */
    setTreeDataList(val) {
      this.treeDataList = val;
    },
    /** 刷新数据 */
    reload() {
      this.initTreeDataList();
    },
    /********************************************************** 组件外部实现使用方法 end ************************************************************************ */
    /********************************************************** 组件内部实现使用方法 start ************************************************************************ */

    /** 初始化 g-tree 默认配置对象 */
    initTreeProps() {
      const obj = {
        /** 是否自动展开父节点 */
        autoExpandParent: false,
        /** 是否节点占据一行 */
        blockNode: true,
        /** 节点前添加 Checkbox 复选框 */
        checkable: false,
        /** checkable 状态下节点选择完全受控（父子节点选中状态不再关联） */
        checkStrictly: false,
        /** 默认展开所有树节点 */
        defaultExpandAll: false,
        /** 将树禁用 */
        disabled: false,
        /** 设置节点可拖拽 */
        draggable: true,
        /** 支持点选多个节点（节点本身） */
        multiple: false,
        /** 是否可选中 */
        selectable: true,
        /** 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 */
        showIcon: true,
        /** 是否展示连接线 */
        showLine: false,
        /** 设置 false 时关闭虚拟滚动 */
        virtual: true,
      };
      this.setProps(obj);
    },

    /** 初始化数据 */
    initTreeDataList() {
      if (this.fetch) {
        this.setLoading(true);
        this.fetch()
          .then((res) => {
            this.setTreeDataList(res.items);
            console.log(this.getTreeDataList());
            this.$emit('fetch-success', res);
            console.log(this.getTreeDataList());
          })
          .catch((error: any) => {
            this.$emit('fetch-error', error);
          })
          .finally(() => {
            this.setLoading(false);
          });
      }
    },

    /** 新增 */
    handleAddClick() {
      console.log('新增根组件');
    },

    /** 点击复选框触发 */
    check(checkedKeys, e) {
      this.$emit('check', checkedKeys, e);
    },

    /** dragend 触发时调用 */
    dragend({ event, node }) {
      this.$emit('dragend', { event, node });
    },

    /** dragenter 触发时调用 */
    dragenter({ event, node, expandedKeys }) {
      this.$emit('dragenter', { event, node, expandedKeys });
    },

    /** dragleave 触发时调用 */
    dragleave({ event, node }) {
      this.$emit('dragleave', { event, node });
    },

    /** dragover 触发时调用 */
    dragover({ event, node }) {
      console.log('dragover');
      this.$emit('dragover', { event, node });
    },

    /** 开始拖拽时调用 */
    dragstart({ event, node }) {
      this.$emit('dragstart', { event, node });
    },

    /** drop 触发时调用 */
    drop({ event, node, dragNode, dragNodesKeys }) {
      this.$emit('drop', { event, node, dragNode, dragNodesKeys });
    },

    /** 展开/收起节点时触发 */
    expand(expandedKeys, { expanded: bool, node }) {
      console.log('expand');
      this.$emit('expand', expandedKeys, { expanded: bool, node });
    },

    /** 节点加载完毕时触发 */
    load(loadedKeys, { event, node }) {
      this.$emit('load', loadedKeys, { event, node });
    },

    /** 节点加载完毕时触发 */
    rightClick({ event, node }) {
      this.$emit('rightClick', { event, node });
    },

    /** 点击树节点触发 */
    select(selectedKeys, { selected: bool, selectedNodes, node, event }) {
      this.$emit('select', selectedKeys, { selected: bool, selectedNodes, node, event });
    },

    /********************************************************** 组件内部实现使用方法 end ************************************************************************ */
  },
});
